<template>
  <el-dialog v-model="visible" :title="title" draggable :close-on-click-modal="false" destroy-on-close append-to-body>
    <div class="form-content">
      <el-form :model="serialform" :rules="formRules" ref="serialformRef" label-position="right" label-width="120px">
        <el-form-item label="流水号名称：" prop="serialNumber" style="width: 60%;">
          <el-input v-model="serialform.serialNumber" placeholder="请输入流水号名称"></el-input>
        </el-form-item>
        <el-form-item  style="width: 60%; position: relative;">
          <template #label>
            <el-checkbox v-model="serialform.showPrefix" label="" />前缀：
          </template>
          <el-input v-model="serialform.prefix" :disabled="!serialform.showPrefix"></el-input>
        </el-form-item>
        <el-form-item label="年号规则：" style="width: 74%;">
          <el-radio-group v-model="serialform.dateRule">
            <el-radio value="">无</el-radio>
            <el-radio value="year">年</el-radio>
            <el-radio value="month">年月</el-radio>
            <el-radio value="day">年月日</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="结束符：" style="width: 20%;" label-width="auto">
          <el-input v-model="serialform.endSymbol"></el-input>
        </el-form-item>
        <el-form-item label="起始值：" prop="initialValue" style="width: 47%;">
          <el-input v-model="serialform.initialValue" type="number" min="0"></el-input>
        </el-form-item>
        <el-form-item label="位数：" prop="digit" label-width="auto" style="width: 47%; padding-left: 20px;">
          <el-input v-model="serialform.digit" type="number" min="0" style="width: 80px; margin-right: 10px;"></el-input>
          <el-checkbox v-model="serialform.isFixedLength" label="固定长度显示" />
        </el-form-item>
        <el-form-item style="width: 60%; position: relative;">
          <template #label>
          <el-checkbox v-model="serialform.showSuffix" label="" />后缀：
          </template>
          <el-input v-model="serialform.suffix" :disabled="!serialform.showSuffix"></el-input>
        </el-form-item>
        <el-form-item label="重置规则：">
          <el-radio-group v-model="serialform.resetRule">
            <el-radio value="">不重置</el-radio>
            <el-radio value="year">按年份</el-radio>
            <el-radio value="month">按月份</el-radio>
            <el-radio value="day">按日</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 预览 -->
        <div class="view-content">
          <el-input v-model="serialform.defaultValue" type="number" readonly :controls="false"></el-input>
        </div>
        <!-- 注 -->
        <div class="tip-content">
          注:重置规则设置为“按年份”，该流水号在年份变化后值重置为最小值;重置规则设置为“按月份”，该流水号在月份变化后值重置为最小值;重置规则设置为“按日”，该流水号在日变化后值重置为最小值。
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="confirm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import { generateId, deepClone, } from "@/utils/util";

  export default {
    name: "serial-number",
    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
    props: {
      dataForm: {
        type: Object,
        default: () => {},
      },
      title: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
        fieldModel: null,
        rules: [],
        formRules: {
          serialNumber: [
            { required: true, trigger: ['blur', 'change'], message: '请输入流水号名称'}
          ],
          initialValue: [
            { required: true, trigger: ['blur', 'change'], message: '请输入起始值' }
          ],
          digit: [
            { required: true, trigger: ['blur', 'change'], message: '请输入位数' }
          ]
        },
        widgetKey: '',
        visible: false,
        serialform: {
        },
      }
    },
    computed: {

    },
    beforeCreate() {
      /* 这里不能访问方法和属性！！ */
    },

    created() {
    },

    mounted() {
    },

    beforeUnmount() {
    },

    methods: {

      refreshWidgetKey() {  //强制刷新组件！！
        this.widgetKey = 'select-key-' + generateId()
      },
      /**
       * 初始化
       */
      init(form) {
        this.serialform = deepClone(form)
        this.visible = true
      },
      /**
       * 关闭弹窗
       */
      handleCloseDialog() {
        // this.resetForm()
        // this.serialform.type = 1
        this.$refs.serialformRef.resetFields()
      },
      /**
       * 重置表单
       */
      resetForm() {
        for (const i in this.serialform) {
          this.serialform[i] = ''
        }
      },
      /**
       * 保存表单
       */
      confirm() {
        this.$refs.serialformRef.validate(valid => {
          if (!valid) return
          this.$emit('confirm',this.serialform);
          this.visible = false
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .full-width-input {
    width: 100% !important;
  }

  :deep(.el-form-item) {
    display: inline-flex !important;
  }
  .view-content {
    position: relative;
    width: 80%;
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    padding: 20px 15px 10px;
    margin: 0 auto;
    &::after{
      position: absolute;
      content: '预览';
      display: inline-block;
      background: #fff;
      width: 60px;
      text-align: center;
      top: 0;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .tip-content{
    width: 100%;
    margin: 10px auto 0;
    color: #1d8a20;
  }
</style>
